<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>添加商品页面</title>
    <link rel="stylesheet" rev="stylesheet" href="${path}/backstage/css/style.css" type="text/css" media="all"/>
    <style>
        .success {
            color: green;
        }

        .error {
            color: red;
        }

        td {
            width: 10%;
        }
    </style>
</head>

<body class="ContentBody">
<form:form modelAttribute="product" action="${path}/backstage/product/add" method="post" enctype="multipart/form-data"
           name="fom" id="fom" target="mainFrame">
    <div class="MainDiv">
        <table width="99%" border="0" cellpadding="0" cellspacing="0" class="CContent">
            <tr>
                <th class="tablestyle_title">添加商品页面</th>
            </tr>
            <tr>
                <td class="CPanel">
                    <table border="0" cellpadding="0" cellspacing="0" style="width:100%">
                        <TR>
                            <TD width="100%">
                                <fieldset style="height:100%;">
                                    <legend>添加商品</legend>
                                    <table border="0" cellpadding="2" cellspacing="1" style="width:100%">
                                        <tr>
                                            <td nowrap align="right">商品编号</td>
                                            <td><input class="text" type="text" name="pNo" id="pNo"
                                                       value="${product.pNo}">
                                                    <%--<span class="red">*</span></td>--%>
                                            </td>
                                            <td><span id="pNoError"><form:errors cssClass="error" path="pNo"/></span>
                                            </td>
                                            <td nowrap align="right">商品名称</td>
                                            <td><input type="text" class="text" name="pName" id="pName"
                                                       value="${product.pName}"/>
                                            </td>
                                            <td>
                                                <span id="pNameError"><form:errors cssClass="error"
                                                                                   path="pName"/></span>
                                            </td>
                                            <td nowrap align="right">规格</td>
                                            <td><input type="text" class="text" name="standard" id="standard"
                                                       value="${product.standard}"/>
                                            </td>
                                            <td>
                                                <span id="standardError"><form:errors cssClass="error"
                                                                                      path="standard"/></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td nowrap align="right">价格</td>
                                            <td><input type="text" class="text" name="price" id="price"
                                                       value="${product.price}"/>
                                            </td>
                                            <td>
                                                <span id="priceError"><form:errors cssClass="error"
                                                                                   path="price"/></span>
                                            </td>
                                            <td align="right">原价</td>
                                            <td><input type="text" class="text" name="oldPrice" id="oldPrice"
                                                       value="${product.oldPrice}"/>
                                            </td>
                                            <td>
                                                <span id="oldPriceError"><form:errors cssClass="error"
                                                                                      path="oldPrice"/></span>
                                            </td>
                                            <td align="right">产地</td>
                                            <td><input type="text" class="text" name="origin" id="origin"
                                                       value="${product.origin}"/>
                                            </td>
                                            <td>
                                                <span id="originError"><form:errors cssClass="error"
                                                                                    path="origin"/></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td nowrap align="right">类别</td>
                                            <td><select name="category.categoryId" id="category.categoryId">
                                                <!--迭代类别begin-->
                                                <c:forEach items="${categories}" var="c">
                                                    <option value="${c.categoryId}"
                                                            <c:if test="${c eq product.category}">selected</c:if>>${c.categoryName}</option>
                                                </c:forEach>
                                                <!--迭代类别end-->
                                            </select></td>
                                            <td></td>
                                            <td align="right">上架</td>
                                            <td><select name="onShelves" id="onShelves">
                                                <option value="1" <c:if test="${product.onShelves==1}">selected</c:if>>
                                                    上架
                                                </option>
                                                <option value="0" <c:if test="${product.onShelves!=1}">selected</c:if>>
                                                    下架
                                                </option>
                                            </select></td>
                                            <td></td>
                                            <td align="right">推荐类型</td>
                                            <td><select name="recState" id="recState">
                                                <!--迭代推荐类型begin-->
                                                <c:forEach items="${recStates}" var="rec">
                                                    <option value="${rec}"
                                                            <c:if test="${rec eq product.recState}">selected</c:if>>${rec}</option>
                                                </c:forEach>
                                                <!--迭代推荐类型end-->
                                            </select></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td nowrap align="right">库存</td>
                                            <td><input type="text" class="text" name="stock" id="stock"
                                                       value="${product.stock}"/>
                                            </td>
                                            <td>
                                                <span id="stockError"><form:errors cssClass="error"
                                                                                   path="stock"/></span>
                                            </td>
                                            <td nowrap align="right">商品图片</td>
                                            <td colspan="5">
                                                <input type="button" id="chooseImg" value="选择图片">
                                                <input type="file" style="display: none"  name="file" id="file"/>
                                                <!--隐藏域：放入图片的imgUrl属性值-->
                                                <input type="hidden" id="imgUrl" name="imgUrl" value="${product.imgUrl}">
                                            </td>
                                        </tr>
                                        <tr style="text-align: center;">
                                            <td colspan="9"><img id="img" name="img" src="${path}/images/product/${product.imgUrl}" alt="商品图片"></td>
                                        </tr>
                                    </table>
                                    <br/>
                                </fieldset>
                            </TD>
                        </TR>

                    </TABLE>


                </td>
            </tr>


            <TR>
                <TD colspan="2" align="center" height="50px">
                        <%--<input type="button" id="save" name="save" value="保存" formtarget="mainfra"--%>
                    <input type="button" id="save" name="save" value="保存" formtarget="mainfra"
                           class="button"/>
                    <input type="button" name="Submit2" value="返回" class="button" onclick="window.history.go(-1);"/>
                </TD>
            </TR>
        </TABLE>
        </td>
        </tr>
        </table>
    </div>
</form:form>

<script src="${path}/js/jquery.min.js"></script>
<script>
    /**
     * 思路：不要用form表单的onsubmit事件 用注册按钮的单击事件，
     * 在验证用户名的ajax返回成功后，再去做其他表单的验证， 这样就可以控制验证的顺序。
     */
    $(function () {
        // 获取需要验证的文本框.
        // 获取商品编号输入框
        var pNo = $("#pNo");
        // 获取商品名称输入框
        var pName = $("#pName");
        // 获取规格输入框
        var standard = $("#standard");
        // 获取价格输入框
        var price = $("#price");
        // 获取原价输入框
        var oldPrice = $("#oldPrice");
        // 获取产地输入框
        var origin = $("#origin");
        // 获取库存输入框
        var stock = $("#stock");
        // 定义一个布尔类型的全局变量，用来标记所有的元素是否都符合条件，
        // 让checkData方法也能访问到，但是必须在addValidate方法中重新初始化为true
        var flag = false;
        // 定义一个布尔类型的变量，用来标记商品编号是否都符合条件
        var flag1 = false;
        // 定义一个布尔类型的变量，用来标记商品名称是否都符合条件
        var flag2 = false;
        //把用户名输入框的onblur事件与注册按钮的单击事件分开写
        $("#save").click(function addValidate() {
                flag = true;
                standard.blur();
                price.blur();
                oldPrice.blur();
                origin.blur();
                stock.blur();
                // 验证pNo格式
                // 初始化flag1，flag2
                flag1 = false;
                flag2 = false;
                // 获取span标签
                var span = $("#pNoError");
                // 获取文本输入框中的值
                var value = $("#pNo").val();
                // 创建正则表达式对象
                var reg = /^[a-zA-Z0-9]{4,12}$/;
                if (!reg.test(value)) {
                    span.html("*4~12位，包含字母和数字");
                    span.addClass("error");
                    span.show();
                }
                //验证pName格式
                // 获取span标签
                var span2 = $("#pNameError");
                // 获取文本输入框中的值
                var value2 = $("#pName").val();
                // 创建正则表达式对象
                var reg2 = /^[\s\S]{1,100}$/;
                if (!reg2.test(value2)) {
                    span2.html("*不能为空，长度100");
                    span2.addClass("error");
                    span2.show();
                }
                if (!(reg.test(value) && reg2.test(value2))) {
                    //结束方法
                    return;
                }
                    /*
                     get方式数据全部拼接在url后面,不安全;拼接数据有容量限制;传输中文会有乱码
                     为了避免以上问题,使用post方式
                     */
                //jQuery事件的方法一定要写在页面加载结束的方法中
                $.post("${path}/backstage/product/checkData",
                    {"pNo": value, "pName": value2}, function (result) {
                        //截取结果字符串
                        var str = result.split(":");
                        //判断响应结果
                        if (str[0] == "true") {
                            flag1 = true;
                            span.removeClass("error");
                            span.addClass("success");
                            span.text("√编号可用!");
                            span.show();
                        } else {
                            span.addClass("error");
                            span.text("×编号已经存在了!");
                            span.show();
                        }
                        if (str[1] == "true") {
                            flag2 = true;
                            span2.removeClass("error");
                            span2.addClass("success");
                            span2.text("√名称可用!");
                            span2.show();
                        } else {
                            span2.addClass("error");
                            span2.text("×名称已经存在了!");
                            span2.show();
                        }
                        //如果全部符合条件，则提交表单
                        if(flag && flag1 && flag2){
                            $("form:first").submit();
                            //$("#fom").submit();
                        }

                    });
            }
        );
        // 绑定onblur事件
        function initOnblur() {
            // 验证pNo
            pNo.blur(function () {
                // 初始化flag1
                flag1 = false;
                // 获取span标签
                var span = $("#pNoError");
                pNo.focus(function () {
                    span.hide();
                });
                // 获取文本输入框中的值
                var value = $("#pNo").val();
                // 创建正则表达式对象
                var reg = /^[a-zA-Z0-9]{4,12}$/;
                if (!reg.test(value)) {
                    span.html("*4~12位，包含字母和数字");
                    span.addClass("error");
                    span.show();
                    return;
                }
                $.post("${path}/backstage/product/checkPNo",
                    {"pNo": value}, function (result) {
                        //判断响应结果
                        if (result == "true") {
                            flag1 = true;
                            span.removeClass("error");
                            span.addClass("success");
                            span.text("√编号可用!");
                            span.show();
                        } else {
                            span.addClass("error");
                            span.text("×编号已经存在了!");
                            span.show();
                        }
                    }
                );
            });
            // pNo end...


            // 验证pName
            pName.blur(function () {
                // 初始化flag2
                flag2 = false;
                // 获取span标签
                var span = $("#pNameError");
                pName.focus(function () {
                    span.hide();
                });
                // 获取文本输入框中的值
                var value = $("#pName").val();
                // 创建正则表达式对象
                var reg = /^[\s\S]{1,100}$/;
                if (!reg.test(value)) {
                    span.html("*不能为空，长度100");
                    span.addClass("error");
                    span.show();
                    return;
                }
                $.post("${path}/backstage/product/checkPName",
                    {"pName": value}, function (result) {
                        //判断响应结果
                        if (result == "true") {
                            flag2 = true;
                            span.removeClass("error");
                            span.addClass("success");
                            span.text("√名称可用!");
                            span.show();
                        } else {
                            span.addClass("error");
                            span.text("×名称已经存在了!");
                            span.show();
                        }
                    }
                );
            });
            // pName end...


            // 验证规格
            checkData(standard, "*不能为空", /^[\s\S]{1,100}$/);
            // 验证价格
            checkData(price, "*只能输入正数", /^\d+(\.\d+)?$/);
            // 验证原价
            checkData(oldPrice, "*只能输入正数", /^\d+(\.\d+)?$/);
            // 验证产地
            checkData(origin, "*不能为空", /^[\s\S]{1,100}$/);
            // 验证库存
            checkData(stock, "*只能输入正整数", /^\d+$/);
        }

        // 定义一个函数,用来检测数据
        // obj代表各个需要验证的输入框
        // info代表span错误时需要显示的内容.
        // fun - 闭包函数
        function checkData(obj, info, reg) {
            var span = obj.parent().next().children(0);
            // 各个文本输入框添加onfocus事件
            obj.focus(function () {
                span.hide();
            });

            // 添加需要验证的文本输入框的onblur事件
            obj.blur(function () {// 为了修改span样式
                // 先获取文本输入框中的内容
                var text = obj.val();
                // 每个验证的regex是不一样的.
                if (reg.test(text)) {
                    // 成功...
                    span.hide();
                } else {
                    // 不成功..
                    flag = false;
                    // 显示错误提示
                    span.removeClass("success");
                    span.addClass("error");
                    span.html(info);
                    span.show();
                }
            });
        }

        // 给表单中的元素绑定onfocus和onblur事件
        initOnblur();
    });
</script>

<script>
    $(function () {
        //按钮单击事件，调用文件标签的单击事件
        $("#chooseImg").click(function() {
            $("#file").click();
        });
        //文件标签onchange事件，改变图片的src和value
        $("#file").change(function() {
            $("#imgUrl").val(this.files[0].name);
            //预览图片(this.files数组是选择的多个图片数组，需在input标签添加multiple属性)
            $("#img").attr("src", window.URL.createObjectURL(this.files[0]));
        });
    });
</script>
</body>
</html>
